<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>刺激参数输入</title>
    <style>
        html, body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: auto;
            background-color: #f5f5f5;
        }
        .header {
            background-color: #333;
            color: white;
            padding: 10px 20px;
            font-size: 18px;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .content {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            max-width: 100%;
            margin: 0 auto;
            overflow-y: auto;
        }
        .form-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
            width: 100%;
            max-width: 500px;
            box-sizing: border-box;
        }
        .form-title {
            font-size: 20px;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
        }
        .input-hint {
            font-size: 12px;
            color: #888;
            margin-top: 4px;
        }
        .required-marker {
            color: #f44336;
            margin-left: 3px;
        }
        .button-container {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            min-width: 100px;
        }
        button:hover {
            background-color: #45a049;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        #cancelBtn {
            background-color: #f44336;
        }
        #cancelBtn:hover {
            background-color: #d32f2f;
        }
        .status-message {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
            display: none;
        }
        .status-message.success {
            background-color: #dff0d8;
            border: 1px solid #d6e9c6;
            color: #3c763d;
        }
        .status-message.error {
            background-color: #f2dede;
            border: 1px solid #ebccd1;
            color: #a94442;
        }
        input:disabled {
            background-color: #f5f5f5;
            color: #999;
            border-color: #ddd;
        }
        .or-divider {
            position: relative;
            margin: 20px 0;
            text-align: center;
            font-weight: bold;
            color: #555;
        }
        .or-divider::before, .or-divider::after {
            content: "";
            position: absolute;
            top: 50%;
            width: 45%;
            height: 1px;
            background-color: #ddd;
        }
        .or-divider::before {
            left: 0;
        }
        .or-divider::after {
            right: 0;
        }
        .parameter-group {
            padding: 15px;
            background-color: #f9f9f9;
            border: 1px solid #eee;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .parameter-group-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="header">
        刺激参数输入
    </div>
    <div class="content">
        <div class="form-container">
            <div class="form-title">请输入刺激参数</div>
            <form id="stimulusForm">
                <div class="form-group">
                    <label for="stimulusPosition">刺激位置<span class="required-marker">*</span></label>
                    <select id="stimulusPosition" name="stimulusPosition" required>
                        <option value="" disabled selected>请选择刺激位置</option>
                        <option value="左">左</option>
                        <option value="右">右</option>
                    </select>
                    <div class="input-hint">选择刺激电极放置的位置</div>
                </div>
                
                <div class="form-group">
                    <label for="stimulusFrequency">刺激频率 (Hz)<span class="required-marker">*</span></label>
                    <input type="number" id="stimulusFrequency" name="stimulusFrequency" placeholder="例如：50" min="1" step="1" required>
                    <div class="input-hint">请输入整数值，单位：Hz (赫兹)</div>
                </div>
                
                <div class="parameter-group">
                    <div class="parameter-group-title">刺激强度参数（电压和电流最多填写一个）</div>
                    
                    <div class="form-group">
                        <label for="stimulusVoltage">刺激电压 (V)</label>
                        <input type="number" id="stimulusVoltage" name="stimulusVoltage" placeholder="例如：5" min="0" step="0.1">
                        <div class="input-hint">单位：V (伏特)</div>
                    </div>
                    
                    <div class="or-divider">或</div>
                    
                    <div class="form-group">
                        <label for="stimulusCurrent">刺激电流 (mA)</label>
                        <input type="number" id="stimulusCurrent" name="stimulusCurrent" placeholder="例如：0.5" min="0" step="0.01">
                        <div class="input-hint">单位：mA (毫安)</div>
                    </div>
                </div>
                
                <div class="button-container">
                    <button type="button" id="cancelBtn">取消</button>
                    <button type="submit" id="submitBtn">提交</button>
                </div>
            </form>
            
            <div id="statusMessage" class="status-message"></div>
        </div>
    </div>

    <script>
        const form = document.getElementById('stimulusForm');
        const voltageInput = document.getElementById('stimulusVoltage');
        const currentInput = document.getElementById('stimulusCurrent');
        const submitBtn = document.getElementById('submitBtn');
        const cancelBtn = document.getElementById('cancelBtn');
        const statusMessage = document.getElementById('statusMessage');
        const frequencyInput = document.getElementById('stimulusFrequency');
        
        // 获取服务器提供的task_id
        const taskId = '{{ task_id }}';
        console.log('获取到的task_id:', taskId);
        
        // 电压和电流最多填一个
        function validateVoltageOrCurrent() {
            // 如果两个都填了，显示错误
            if(voltageInput.value && currentInput.value) {
                voltageInput.setCustomValidity('电压和电流最多填写一个');
                return false;
            }
            
            // 至少填一个
            if(!voltageInput.value && !currentInput.value) {
                voltageInput.setCustomValidity('电压和电流至少填写一个');
                currentInput.setCustomValidity('电压和电流至少填写一个');
                return false;
            }
            
            // 验证通过
            voltageInput.setCustomValidity('');
            currentInput.setCustomValidity('');
            return true;
        }
        
        // 确保频率为整数
        frequencyInput.addEventListener('input', function() {
            this.value = Math.floor(this.value);
        });
        
        // 电压输入框事件
        voltageInput.addEventListener('input', function() {
            if(this.value) {
                // 如果电压有值，禁用电流输入
                currentInput.disabled = true;
                currentInput.value = '';
                currentInput.required = false;
            } else {
                // 如果电压无值，启用电流输入
                currentInput.disabled = false;
                currentInput.required = true;
            }
            validateVoltageOrCurrent();
        });
        
        // 电流输入框事件
        currentInput.addEventListener('input', function() {
            if(this.value) {
                // 如果电流有值，禁用电压输入
                voltageInput.disabled = true;
                voltageInput.value = '';
                voltageInput.required = false;
            } else {
                // 如果电流无值，启用电压输入
                voltageInput.disabled = false;
                voltageInput.required = true;
            }
            validateVoltageOrCurrent();
        });
        
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 表单验证
            if(!validateVoltageOrCurrent() || !form.checkValidity()) {
                form.reportValidity();
                return;
            }
            
            // 检查task_id是否存在
            if (!taskId) {
                showStatus('error', '缺少任务ID参数');
                return;
            }
            
            // 准备数据
            const formData = {
                position: document.getElementById('stimulusPosition').value,
                frequency: parseInt(document.getElementById('stimulusFrequency').value),
                voltage: document.getElementById('stimulusVoltage').value ? 
                    parseFloat(document.getElementById('stimulusVoltage').value) : null,
                current: document.getElementById('stimulusCurrent').value ? 
                    parseFloat(document.getElementById('stimulusCurrent').value) : null
            };
            
            // 重新检查电压和电流不能同时有值
            if (formData.voltage !== null && formData.current !== null) {
                voltageInput.setCustomValidity('电压和电流最多填写一个');
                form.reportValidity();
                return;
            }
            
            // 提交数据
            fetch(`/task/stimulus_param_user_input/result_input/${taskId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                if(data.error) {
                    showStatus('error', '提交失败: ' + data.error);
                } else {
                    showStatus('success', '参数提交成功！');
                    setTimeout(() => {
                        window.close();
                    }, 1500);
                }
            })
            .catch(error => {
                showStatus('error', '提交请求失败: ' + error);
            });
        });
        
        cancelBtn.addEventListener('click', function() {
            window.close();
        });
        
        function showStatus(type, message) {
            statusMessage.textContent = message;
            statusMessage.className = 'status-message ' + type;
            statusMessage.style.display = 'block';
        }
        
        // 初始验证
        validateVoltageOrCurrent();
        
        // 页面加载后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 重置表单
            form.reset();
            // 确保两个输入框都未禁用
            voltageInput.disabled = false;
            currentInput.disabled = false;
        });
    </script>
</body>
</html> 